import { Box, Checkbox, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import MainLayout from 'components/HOCs/main-layout';
import GFSTable from 'components/shared/tables/gfs-table';
import { format } from 'date-fns';
import { useState } from 'react';

const AssetManagementPage = () => {
    function createData(name, address, date1, date2, status) {
        return { name, address, date1, date2, status };
    }

    const rows = [
        createData(
            'Yumi Takahashi',
            '0xd620c65fb8cdfef51f7121d4d8e6cded52658d07',
            new Date().getTime(),
            new Date().getTime(),
            1
        ),
        createData(
            'James Bond',
            '0xd620c65fb8cdfef51f7121d4d8e6cded52658d07',
            new Date().getTime(),
            new Date().getTime(),
            1
        ),
        createData(
            'Sarah Lee',
            '0xd620c65fb8cdfef51f7121d4d8e6cded52658d07',
            new Date().getTime(),
            new Date().getTime(),
            1
        ),
        createData(
            'Jessica Mendez',
            '0xd620c65fb8cdfef51f7121d4d8e6cded52658d07',
            new Date().getTime(),
            new Date().getTime(),
            1
        ),
        createData(
            'Rasputin',
            '0xd620c65fb8cdfef51f7121d4d8e6cded52658d07',
            new Date().getTime(),
            new Date().getTime(),
            1
        )
    ];

    const [checked, setChecked] = useState(rows.map(() => false));

    const handleChange = (event, index) => {
        const data = [...checked];
        data[index] = event.target.checked;
        setChecked(data);
    };

    // const handleCheckAll = (event) => {
    //     setChecked(checked.map((_) => event.target.checked));
    // };

    return (
        <MainLayout>
            <Box sx={{ p: 6 }}>
                <GFSTable>
                    <Table sx={{ minWidth: 650 }} aria-label="simple table">
                        <TableHead>
                            <TableRow>
                                <TableCell align="center">#</TableCell>
                                <TableCell align="center">Scholar Name</TableCell>
                                <TableCell align="center">Wallet address</TableCell>
                                <TableCell align="center">Last Payout Date</TableCell>
                                <TableCell align="center">Scheduled Payout</TableCell>
                                <TableCell align="center">Status</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {rows.map((row, index) => (
                                <TableRow
                                    key={row.name}
                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                >
                                    <TableCell align="center">
                                        <Checkbox
                                            checked={checked[index]}
                                            onChange={(event) => handleChange(event, index)}
                                        />
                                    </TableCell>
                                    <TableCell component="th" scope="row" align="center">
                                        {index + 1}.
                                    </TableCell>
                                    <TableCell align="center">{row.name}</TableCell>
                                    <TableCell align="center">{row.address}</TableCell>
                                    <TableCell align="center">
                                        {format(row.date1, 'MM-dd-yyyy')}
                                    </TableCell>
                                    <TableCell align="center">
                                        {format(row.date2, 'MM-dd-yyyy')}
                                    </TableCell>
                                    <TableCell align="center">
                                        {row.status === 1 ? 'Sent' : 'Not Sent'}
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </GFSTable>
            </Box>
        </MainLayout>
    );
};

export default AssetManagementPage;
